/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity,
  PropTypes,
  ToastAndroid
} from 'react-native';

var MyProject1 = React.createClass({
    getInitialState:function(){
       return{
         inputText:""
       };
    },
    getContent:function(text){
        this.setState({
            inputText:text
        });
    },
    clickBtn: function(){

    },
  render:function() {
    return (
        <View style={styles.container}>
            <Image source={require('./img/timg.png')} style={styles.image}>
                <View style={styles.content}>
                    <View style={styles.blueBox}>
                        <View style={styles.whiteBox}>
                            <View style={styles.Box}>
                                <Text style={styles.btnFont}>用户名：</Text>
                                <TextInput
                                    underlineColorAndroid = {'transparent'}
                                    multiline={false}
                                    style={styles.inputBox}></TextInput>
                            </View>
                              <View style={styles.Box}>
                                  <Text style={styles.btnFont}>密码：</Text>
                                  <View>
                                      <TextInput
                                          underlineColorAndroid = {'transparent'}
                                          multiline={false}
                                          secureTextEntry={true}
                                          style={styles.inputBox}>
                                        </TextInput>
                                  </View>
                              </View>
                            <View style={styles.mentionBox}>
                                <TouchableOpacity  onPress={()=>{alert('点击注册')}}>
                                    <View style={styles.primaryBtn}>
                                        <Text style={styles.btnFont}>注册</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={()=>{alert('点击登录')}}>
                                     <View style={styles.primaryBtn}>
                                         <Text style={styles.btnFont}>登陆</Text>
                                     </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.mentionBox}>
                                <Text style={styles.btnFont}>忘记密码</Text>
                            </View>
                        </View>
                    </View>
                </View>
            </Image>
        </View>
    );
  }
});

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    //容器
    container:{
      flex:1,
      backgroundColor:'black',
      opacity:0.8
    },
    //蒙板
    content:{
        flex:1,
        width:385,
        backgroundColor:'black',
        opacity:0.8,
        alignItems:'center',
        justifyContent:'center'
    },
    //背景图片
    image:{
        resizeMode:Image.resizeMode.cover,
        flex:1
    },
    //蓝色框
    blueBox:{
        backgroundColor: '#0767c8',
        height: 200,
        width: 300,
        opacity:0.8
    },
    //白色框
    whiteBox:{
        backgroundColor: 'white',
        height: 180,
        width: 280,
        margin:10,
        opacity: 1
    },
    //框
   Box: {
       margin: 5,
       padding: 5,
       flexDirection: 'row',
       height: 45,
       justifyContent: 'center',
       alignItems: 'center'
   },
    inputViewBox: {
      height:45,
    },
    //输入框
    inputBox: {
       width: 45
    },
    //基础按钮
    mentionBox:{
        margin: 5,
        padding: 5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      height:30
    },
   primaryBtn: {
       width: 55,
       margin: 5,
       backgroundColor: '#0767c8',
       height: 25,
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: 5
   },
    //按钮字体
   btnFont: {
       color: 'white',
       fontSize: 15,
       fontWeight: 'bold' //粗体
   }
});

AppRegistry.registerComponent('MyProject1', () => MyProject1);
